<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      .title {
        font-weight: bold;
      }
      .high {
        color: red;
      }
    </style>
  </head>
  <body>
    <p class="title" title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
    <ul>
      <li title="苹果">苹果</li>
      <li title="橘子">橘子</li>
      <li title="菠萝">菠萝</li>
    </ul>

    <input type="text" id="address" value="请输入邮箱地址" />

    <script src="../static/plugins/jquery/jquery-3.3.1.min.js"></script>
    <script>
      var first = $("ul li:eq(0)").text();
      console.log(first);
      var second = $("p").attr("title");
      console.log(second);

      //创建节点
      var li_1 = $('<li title="雪梨">雪梨</li>');
      var li_2 = $("<li>桃子</li>");
      var other = $("<li>其他</li>");
      li_2.attr({ title: "桃子", id: "li" });
      li_2.addClass("high");
      li_2.removeClass("high");
      console.log(li_2.attr("id"));
      li_2.removeAttr("id");
      $("ul").prepend(li_1);
      $("ul").prepend(li_2);
      $("ul").prepend(other);

      if ($("p").hasClass("title")) {
        console.log($("p").hasClass("title"));
        // alert($('p').html())
        // alert($('p').text())
      }

      //删除节点
      //$('ul li:eq(2)').remove();
      //$('ul li').remove('li[title=菠萝]');
      //$('ul li:eq(2)').empty() //清空
    </script>

    <script>
      var $address = $("#address");
      //获取焦点
      $address.focus(function () {
        var text = $(this).val();
        if (text == "请输入邮箱地址") {
          $(this).val("");
        }
      });

      //失去焦点
      $address.blur(function () {
        var text = $(this).val();
        if (text == "") {
          $(this).val("请输入邮箱地址");
        }
      });
    </script>
  </body>
</html>
